<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    width="55%"
    destroy-on-close
    :before-close="handleClose"
    @open="getApplyHistory"
  >
    <el-divider class="zdy-divider" />
    <div class="box-controller">
      <div class="box-search">
        <div class="box-search-left">
          <el-form :inline="true" :model="formParam">
            <el-form-item label="状态:">
              <el-select class="gMinWidth" v-model="formParam.status" placeholder="请选择状态" clearable>
                <el-option :label="item.label" :value="item.value" v-for="(item, index) of auditStatusList" />
              </el-select>
            </el-form-item>
            <el-form-item label="更新日期:">
              <el-date-picker
                v-model="tempDateRange"
                type="daterange"
                range-separator="-"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="gMaxWidth"
              />
            </el-form-item>
            <el-form-item label="申请号:">
              <el-input
                class="gWidth"
                v-model="formParam.applicationNo"
                placeholder="请输入要查询的指标名称"
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="box-search-right">
          <el-button type="primary" class="zdy-btn" @click="searchWay">搜索</el-button>
          <el-button class="zdy-btn" @click="resetForm">重置</el-button>
        </div>
      </div>
    </div>
    <div class="table-list">
      <el-table ref="multipleTableRef" :data="dataList" row-key="id" border class="custom-table" max-height="600">
        <el-table-column type="index" align="left" label="序号" min-width="60" />
        <el-table-column prop="createdAt" align="left" label="申请时间" min-width="180"> </el-table-column>
        <el-table-column prop="applicationNo" align="left" label="审批申请号" min-width="200" />
        <!-- <el-table-column prop="status" align="left" label="状态" min-width="140"/> -->
        <el-table-column prop="status" align="left" label="状态" min-width="130">
          <template #default="scope">
            <span>
              {{ getStatusLabel(scope.row.status) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="指标信息" min-width="140">
          <template #default="{ row }">
            <span>共{{ row.quantity }}个指标</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="left" label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="viewHandle(scope.row)"> 查看详情 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card-pagination">
      <el-pagination
        v-model:current-page="formParam.pageNum"
        v-model:page-size="formParam.pageSize"
        :small="true"
        :background="true"
        layout="total, prev, pager, next, jumper"
        :total="total"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确认</el-button>
    </span>
  </el-dialog>

  <auditSituationDialog
    ref="auditSituationRef"
    v-model:visible="auditSituationVisible"
    :title="auditSituationTitle"
    :dialogType="auditSituationType"
    :rowData="auditSituationRow"
    @updateList="getApplyHistory"
  ></auditSituationDialog>
</template>

<script setup>
import { ref, computed, reactive, watchEffect } from "vue"
import auditSituationDialog from "./auditSituationDialog.vue"
import { applyHistory, applyHistoryDetails } from "../../../api/datamanage/fillreport"

// 定义 emits
const emit = defineEmits(["saveBack", "update:visible"])

const auditSituationVisible = ref(false)
const auditSituationType = ref(null)
const auditSituationRow = ref({})
const auditSituationTitle = ref("")

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: "审批申请历史"
  }
})
const dataList = ref([])
const dialogTitle = computed(() => props.title)
const formParam = reactive({
  status: "", //状态
  startDated: "", // 新增开始时间
  endDated: "", // 新增结束时间
  applicationNo: "", // 申请号
  pageNum: 1,
  pageSize: 10
})
//分页组件
const total = ref(0) // 总条数

const auditStatusList = ref([
  { label: "等待审批", value: "2", color: "color-bg-blue" },
  { label: "审批通过", value: "3", color: "color-bg-green" },
  { label: "审批驳回", value: "0", color: "color-bg-red" },
  { label: "作废", value: "4", color: "color-bg-grey" }
])
const tempDateRange = ref([]) // 临时日期范围存储
// 在搜索方法前添加监听
watchEffect(() => {
  if (tempDateRange.value && tempDateRange.value.length === 2) {
    formParam.startDated = tempDateRange.value[0] + " 00:00:00"
    formParam.endDated = tempDateRange.value[1] + " 23:59:59"
  } else {
    formParam.startDated = ""
    formParam.endDated = ""
  }
})

async function getApplyHistory() {
  const { data } = await applyHistory(formParam)
  dataList.value = data.records
  total.value = data.total
}

const resetForm = () => {
  reset()
  searchWay()
}
function searchWay() {
  formParam.pageNum = 1
  formParam.pageSize = 10
  getApplyHistory()
}
const handleClose = () => {
  reset()
  emit("update:visible", false)
}
async function viewHandle(row) {
  const { data } = await applyHistoryDetails(row.id)
  auditSituationRow.value = data
  auditSituationTitle.value = "审批申请详情"
  auditSituationVisible.value = true
  auditSituationType.value = "3"
}

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    // 修改为正确的变量名
    emit("update:visible", val)
  }
})
const handleSubmit = () => {
  reset()
  emit("update:visible", false)
}

function reset() {
  formParam.status = ""
  tempDateRange.value = [] // 重置临时日期范围
  formParam.startDated = ""
  formParam.endDated = ""
  formParam.applicationNo = ""
  formParam.pageNum = 1
  formParam.pageSize = 10
}

const getStatusLabel = (status) => {
  const target = auditStatusList.value.find((item) => item.value === status)
  return target?.label || status
}
</script>

<style lang="scss" scoped>
.box-controller {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.box-search {
  display: flex;
}

.box-search-left {
  display: flex;
  align-items: center;
  margin-right: 20px;
  .gMinWidth {
    width: 120px;
  }
  ::v-deep .el-range-editor.el-input__wrapper {
    width: 280px !important;
  }
  .gWidth {
    width: 200px;
  }
}

.box-search-right {
  display: flex;
}

.table-list {
  margin-bottom: 20px;
}
:deep(.el-table__header th) {
  background-color: #f3f7fb !important;
}
.custom-table {
  width: 100%;
}

.card-pagination {
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}
.zdy-divider {
  margin: 10px 0;
  border-color: #e9e9e9;
}
.dialog-footer {
  margin-top: 20px;
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
